<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .titem {
            margin-left: 10px;
        }

        .title {
            width: 96%;
            margin-left: 2%;
            border-radius: 10px;
            background-color: rgb(252, 250, 247);
        }

        .re {
            margin: 10px;
        }


        .list .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
            color: red;
            border-radius: 10px;
        }

        .item img {
            width: 50px;

        }

        button {
            width: 60px;
            height: 30px;
            border-radius: 20px;
            background-color: red;
            color: #fff;
        }

        .liston{
            display: flex;
            justify-content:space-around;
            align-items: center;
        }
        .itemon {
            margin: 20px;
            color: red;
            border-radius: 10px;
        }

        .middleon{
            width: 90px;
            height: 120px;
            background-color: pink;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 10px;
        }
        .man{
            font-size: 30px;
            font-weight: bold;
            margin-top: 20px;
        }
        .ke{
            margin-top: 30px;
        }
        .itemnan{
           float: left;
           margin-left: 25px;
           font-weight: bold;
        }
        .ren{
            margin-left: 10px;
        }
        .dian{
            color: #929292;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="titem">饿了么
        </div>
        <!-- 热门单品 -->
        <div class="title">
            <div class="re">热门单品</div>
            <div class="list">
                <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
                    <div class="left">
                        <img v-bind:src="item.pic" alt="">
                    </div>
                    <div class="middle">
                        <div class="name">{{item.name}}</div>
                        <div class="desc">{{item.desc}}</div>
                        <div class="dou">{{item.dou}}</div>
                        <div class="dian">{{item.dian}}</div>
                    </div>
                    <div class="reght">
                        <button>{{item.status='立即兑'}}</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 通用红包限量兑 -->
        <div class="ren">通用红包限量兑</div>
        <div class="liston">
            <div class="itemon" v-for="(item,index) in hongyong" v-bind:key="index">
                <div class="middleon">
                    <div class="man">￥{{item.man}}</div>
                    <div class="ke">{{item.ke}}</div>
                </div>
            </div>
        </div>
        <!-- 吃货联盟红包 -->
        <div class="itemnan" v-for="(item,index) in chihuo" v-bind:key="index">
            <div class="chi">
                <div class="huo">{{item.huo}}</div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    //实例化Vue
    var v = new Vue({
        el: '#app',
        data: {
            tasklist: [
                { id: 1, pic: './1.jpg', name: '脐橙3斤 快递到家', desc: '兑换后入手价8.9元', dou: '10', dian: '通用门店>', status: 1 },
                { id: 2, pic: './2.jpg', name: '粑粑柑2斤 快递到家', desc: '兑换后入手价9.9元', dou: '30', dian: '通用门店>', status: 1 },
                { id: 3, pic: './3.jpg', name: '水果捞350g', desc: '兑换后入手价6.9元', dou: '60', dian: '通用门店>', status: 1 }
            ],
            hongyong: [
                { man: '5', ke: '满30可用'  },
                { man: '5', ke: '满30可用' },
                { man: '8', ke: '满50可用'},
            ],
            chihuo:[
                {huo: '吃货联盟红包'},
                {huo: '吃货联盟红包'},
                {huo: '吃货联盟红包'}
            ]

        }
    })

</script>